<template>
	<div class="card" :data="data">
		<div class="count" style="float: left;">
			<p>预警总数</p>
			<div>
				<span>
          <countTo :startVal="0" :endVal="item.totalWarnings || 0" :duration='5000'></countTo>
          <i>起</i>
        </span>
			</div>
		</div>
		<div class="count" style="float: right;">
			<p>已劝阻</p>
			<div>
        <span>
          <countTo :startVal="0" :endVal="item.totalDissuadedWarnings || 0" :duration='5000'></countTo>
          <i>起</i>
        </span>
			</div>
		</div>
		<div class="amount" style="float: left;">
			<p>止损金额</p>
			<div>
        <countTo :startVal="0" :endVal="stopLossAmount || 0" :duration='5000'></countTo>
				{{stopLossAmountText}}元
			</div>
		</div>
		<div class="amount" style="float: right;">
			<p>损失金额</p>
			<div>
        <countTo :startVal="0" :endVal="lossAmount || 0" :duration='5000'></countTo>
				{{lossAmountText}}元
			</div>
		</div>
	</div>
</template>

<script>
  import countTo from 'vue-count-to';
	export default{
    components: {
      countTo
    },
		name: 'card',
    props: {
      data: {
        type: Object,
        default: () => {
          return {
            totalAmountOfLoss: 0,
            totalAmountOfStopLoss: 0,
            totalDissuadedWarnings: 0,
            totalWarnings: 0,
          }
        }
      }
    },
    data() {
      return {
        item: {
          totalAmountOfLoss: 0,
          totalAmountOfStopLoss: 0,
          totalDissuadedWarnings: 0,
          totalWarnings: 0,
        }
      }
    },
    watch: {
      data: function(res) {
        if (res) {
          this.item = res
        } else {
          this.item = {
            totalAmountOfLoss: 0,
            totalAmountOfStopLoss: 0,
            totalDissuadedWarnings: 0,
            totalWarnings: 0,
          }
        }
      }
    },
    computed: {
      stopLossAmount: function() {
        let num = this.item.totalAmountOfStopLoss
        let amount = 0
        if(num > 100000000) {
          let result = (num / 100000000).toString()
          amount = result.indexOf('.') === -1 ? result : Number(result).toFixed(2)
        } else if(num > 100000) {
          let result = (num / 10000).toString()
          amount = result.indexOf('.') === -1 ? result : Number(result).toFixed(2)
        } else {
          amount = num
        }
        return amount
      },
      stopLossAmountText: function() {
        let num = this.item.totalAmountOfStopLoss
        let text = ''
        if(num > 100000000) {
          text = '亿'
        } else if(num > 100000) {
          text = '万'
        } 
        return text
      },
      lossAmount: function() {
        let num = this.item.totalAmountOfLoss
        if(num > 100000) {
          num = (num / 10000).toFixed(2)
        } else if(num > 100000000) {
          num = (num / 100000000).toFixed(2)
        }
        return num
      },
      lossAmountText: function() {
        let num = this.item.totalAmountOfLoss
        let text = ''
        if(num > 100000) {
          text = '万'
        } else if(num > 100000000) {
          text = '亿'
        }
        return text
      },
    }
	}
</script>

<style lang="less" scoped>
	.card{
		width: 100%;
		height: 24.3vh;
		color: #00AEFF;
		.count{
			width: 45.545%;
			height: 13.7vh;
			background-image: url(image/count.png);
			background-size: 100% 100%;
      padding: 5px 0;
			padding-left: 1.302vw;
			margin-bottom: 3.6111vh;
			display: flex;
			flex-flow: column;
			justify-content: flex-start;
			p{
				// font-family: 'SourceHanSansCN-Regular';
				font-size: 1.6666vh;
        height: 45%;
        margin: 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
			}
			div{
        flex: 1;
        display: flex;
        align-items: center;
        padding-bottom: 0.5vh;
				span{
					font-size: 2.777vh;
          color: #fff;
					// margin-right: 0.833vh;
				}
        i{
          font-style: initial;
          font-size: 1.296vh;
          color: rgba(255, 255, 255, .5);
          font-style: 'SourceHanSansCN-Regular';
        }
			}
		}
		.amount{
			width: 45.545%;
			height: 8.518vh;
			background-image: url(image/amount.png);
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			p{
				font-size: 1.666vh;
        margin-bottom: 0;
        width: 48%;
        text-align: center;
			}
			div{
        width: 56%;
				color: #fff;
        text-align: center;
				span{
					font-size: 1.8518vh;
					margin-right: 2px;
				}
				font-size: 1.3vh;
			}
		}
	}
</style>
